﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Easyui扩展库 Datagrid - 落阳 整理</title>
    <link href="http://www.easyui-extlib.com/Content/Site.css" rel="stylesheet" />
    <script src="http://www.easyui-extlib.com/Scripts/jquery/jquery-1.11.0.min.js"></script>
    <script src="http://www.easyui-extlib.com/Scripts/jquery-extensions/jquery.jdirk.js"></script>
    <link href="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/themes/default/easyui.css" rel="stylesheet" />
    <link href="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/themes/icon.css" rel="stylesheet" />
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>

    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui-extensions/datagrid/jeasyui.extensions.datagrid.navigating.js"></script>
    <script>
    $(function () {

        var getFrozenColumns = function () {
            var result = [];

            var c1 = [];
            c1.push({ field: '333', title: '123', width: 100, checkbox: true });
            c1.push({ field: '444', title: '456', width: 100, hidden: true });
            c1.push({ field: 'AreaName', title: '地区', width: 150 });
            c1.push({
                field: 'Sex1', title: '男', width: 90,
                formatter: function (val) {
                    return val + "（男0）";
                }
            });
            c1.push({
                field: 'Sex2', title: '女', width: 90,
                formatter: function (val) {
                    return val + "（女1）";
                }
            });

            result.push(c1);

            return result;
        };

        var getColumns = function () {
            var result = [];

            var normal00000 = [
                { field: 'TS1', title: '测试1', width: 60 },
                { field: 'TS2', title: '测试2', width: 60 },
                { field: 'TS3', title: '测试3', width: 60, hidden: true },
                {
                    field: 'TS4', title: '测试4', width: 160,
                    formatter: function (val, row) {
                        return "<span style='color:red;'>我擦擦擦<span>" + val;
                    }
                },
                {
                    field: 'TS5', title: '测试5（显示对象中的属性）', width: 160,
                    formatter: function (val, row) {
                        return row.Obj != undefined ? row.Obj.OName : "不存在Obj对象";
                    }
                }
            ];
            result.push(normal00000);

            return result;
        };
        var options = {
            title: "此列表设置了回车弹出已selected的数据行长度，可通过回车查看。",
            idField: "ID",
            rownumbers: false,
            fit: true,
            border: false,
            singleSelect: true,
            frozenColumns: getFrozenColumns(),
            columns: getColumns(),
            method: "get",
            url: "datagrid-common-data.json",
            pagination: false,
            navigatingWithKey: true,
            navigateHandler: {
                up: function (targetIndex) {
                    console.log("上之后被selected的数据索引" + targetIndex);
                },
                down: function (targetIndex) {
                    console.log("下之后被selected的数据索引" + targetIndex);
                },
                enter: function (selectedData) {
                    alert(selectedData.length);
                }
            }
            //,
            //默认的导航翻页事件中，会自动select第一条row或这最后一条row。可以通过重写该事件来达到期望的效果。
            //onNavigatePaginate: function (ntype, newData) {
            //    console.log(ntype);
            //}
        };

        $("#dg").datagrid(options);
    });
    </script>
</head>
<body>
    <div class="easyui-panel" data-options="fit:true,border:false,title:'本demo纯静态，不演示后台分页，因此左右键不会触发翻页'">
        <table id="dg"></table>
    </div>
</body>
</html>
